<template>
  <div w-full>
    <div
      @click="$navigateTo(props.src || `/pages/goods/product/detail?skuId=${props.res.id}&goodsId=${props.res.goodsId}`)"
      w-full flex goods-col overflow-hidden flex-a-c>
      <div style="flex:3">
        <image v-if="props.res.thumbnail" :src="props.res.thumbnail" @error="props.res.thumbnail = ''" w-200rpx h-200rpx
          rounded>
        </image>
        <div rounded v-else w-200rpx h-200rpx bg-color text-24rpx flex flex-a-c flex-j-c>图片已失效</div>
      </div>
      <div style="flex:7" overflow-hidden pl-20rpx flex flex-col flex-j-sb>
        <div>
          <div class="wes">
            {{ props.res.goodsName }}
          </div>

          <div flex-col mt-20rpx>
            <div text-38rpx font-bold text-main-color>
              <span text-24rpx>￥</span>{{ unitPrice(props.res.price || props.res.purchasePrice, '') }}
            </div>
          </div>

          <div text-24rpx mt-4rpx flex flex-a-c flex-j-sb color-warmGray>
            <div>
              <span v-if="props.res.originalPrice != undefined">即将恢复{{ props.res.originalPrice }}元</span>
            </div>
            <image class='buy' src="/static/promotions/buy.png"></image>
          </div>

        </div>
        <slot name="body"></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { unitPrice } from '@/utils/filters';
const props = defineProps<{
  res: any,
  src?: string

}>()
</script>

<style scoped>
.wes {
  /* 多出部分用省略号表示 , 用于一行 */
  overflow: hidden;
  word-wrap: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.buy {
  width: 132rpx;
  height: 88rpx;
}
</style>
